<template>
  <div class="back-space">
    <div class="content">
      {{content}}
    </div>
    <em></em>
    <span></span>
  </div>
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      default: '删除'
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .back-space
    width 36px
    height 24px
    background rgba(224,40,40,0);
    border 1px solid #929292
    border-top-right-radius 4px
    border-bottom-right-radius 4px
    text-align center
    position relative
    box-sizing border-box
    display flex 
    align-items center 
    background rgba(0,0,0,0.9)
    justify-content space-around
    em
      position: absolute;
      width: 0px;
      height: 0px;
      border: 12px dashed #808080;
      border-color: transparent rgba(#929292, 0.6) transparent transparent; 
      top: 50%;
      transform translateY(-50%)
      left: -25px;
    span
      position: absolute;
      width: 0px;
      height: 0px;
      border: 11px dashed #808080;
      border-color: transparent rgba(0,0,0,1) transparent transparent; 
      left -21px
      top: 50%;
      transform translateY(-50%)
    .content
      color #fff
      
      border-top-right-radius 4px
      border-bottom-right-radius 4px
  
</style>